﻿@{
    ViewBag.Title = "Index";
}


<!-- Main content -->
<section class="content" ng-app="userApp" ng-controller="userController">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">员工</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form class="navbar-form navbar-left" role="search" ng-submit="loadUserList()">
                    <div class="form-group">
                        <button class="btn btn-default" data-toggle="modal" data-target="#createUserModal" ng-click="edit(0)">添加</button>
                    </div>
                    <div class="form-group">
                        <input type="text" ng-model="searchUserName" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">搜 索</button>
                </form>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>


    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <table class="table table-hover">
                        <tr>
                            <th style="width: 10px">#</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>组织机构</th>
                            <th></th>
                        </tr>
                        <tr ng-repeat="(index,user) in userList">
                            <td>{{page.pageSize*(page.pageIndex-1)+index+1}}.</td>
                            <td>{{user.userName}}</td>
                            <td>{{user.email}}</td>
                             <td>{{user.orgName}}</td>
                            <td>
                                <button class="btn btn-default btn-xs" ng-click="edit(user.id)" data-toggle="modal" data-target="#editUserModal">编辑</button>
                                <button class="btn btn-default btn-xs" ng-click="delete(user.id)">删除</button>
                            </td>
                        </tr>

                    </table>
                </div>
                <!-- /.box-body -->
                <div class="box-footer clearfix">
                    <span>{{page.total}}</span>
                    <ul class="pagination pagination-sm no-margin pull-right">
                        <li ng-hide="i-1<1"><a href="#" ng-click="page.pageIndex=i-1;loadUserList()">&laquo;</a></li>
                        <li ng-repeat="i in page.pageRange " class="{{i==page.pageIndex?'active':''}}"><a href="#" ng-click="page.pageIndex=i;loadUserList()">{{i}}</a></li>
                        <li ng-hide="i+1>page.totalPageCount"><a href="#" ng-click="page.pageIndex=i+1;loadUserList()">&raquo;</a></li>
                    </ul>
                </div>

                <div class="overlay" ng-show="userLoading">
                    <i class="fa fa-refresh fa-spin"></i>
                </div>
            </div>
            <!-- /.box -->
        </div>
    </div>

      <div class="modal" id="createUserModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >创建</h4>
                </div>
                <div class="modal-body">
                    <form name="createForm" class="form-horizontal" ng-submit="createForm.$valid&&save()" novalidate="novalidate">
                        <div class="box-body">
                            <div class="form-group {{createForm.userName.$dirty?(createForm.userName.$invalid?'has-error':'has-success'):''}}"  >
                                <label class="col-sm-2 control-label">用户名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="userName" placeholder="用户名" ng-model="userName" required ng-pattern="/^.{3,}$/">
                                </div>
                            </div>
                            <div class="form-group {{createForm.password.$dirty?(createForm.password.$invalid?'has-error':'has-success'):''}}" >
                                <label class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-10">
                                    <input id="createPassword" type="password" name="password" class="form-control" placeholder="密码" ng-model="password" required ng-pattern="/^.{6,}$/" />
                                </div>
                            </div>
                            <div class="form-group {{createForm.confPassword.$dirty?(createForm.confPassword.$invalid?'has-error':'has-success'):''}}">
                                <label class="col-sm-2 control-label">确认密码</label>
                                <div class="col-sm-10">
                                    <input type="password" name="confPassword" class="form-control" placeholder="确认密码" ng-model="confPassword" compare-to="#createPassword" required ng-pattern="/^.{6,}$/" />
                                </div>
                            </div>
                            <div class="form-group" >
                                <label class="col-sm-2 control-label">组织机构</label>
                                <div class="col-sm-10">
                                    <select name="orgId" class="form-control"  ng-model="orgId" required>
                                        <option value="">请选择</option>
                                        <option ng-repeat="data in orgList" value="{{data.id}}">{{data.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" ng-class="{'has-error':createForm.email.$dirty&&createForm.email.$invalid,'has-success':createForm.email.$dirty&&createForm.email.$valid}">
                                <label class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-10">
                                    <input type="email" name="email" class="form-control" ng-model="email" placeholder="邮箱" />
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关 闭</button>
                            <button type="submit" class="btn btn-primary pull-right" ng-disabled="createForm.$invalid||saving">保 存</button>
                        </div>
                    </form>
                </div>

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <div class="modal" id="editUserModal" role="dialog" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑</h4>
                </div>
                <div class="modal-body">
                    <form name="editForm" class="form-horizontal" ng-submit="editForm.$valid&&save()" novalidate="novalidate">
                        <div class="box-body">
                           
                            <div class="form-group" >
                                <label class="col-sm-2 control-label">组织机构</label>
                                <div class="col-sm-10">
                                    <select name="orgId" class="form-control"  ng-model="orgId">
                                        <option ng-repeat="data in orgList" value="{{data.id}}">{{data.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" ng-class="{'has-error':editForm.email.$dirty&&editForm.email.$invalid,'has-success':editForm.email.$dirty&&editForm.email.$valid}">
                                <label class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-10">
                                    <input type="email" name="email" class="form-control"  ng-model="email" placeholder="邮箱" />
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关 闭</button>
                            <button type="submit" class="btn btn-primary pull-right" ng-disabled="editForm.$invalid||saving">保 存</button>
                        </div>
                    </form>
                </div>

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</section>
<!-- /.content -->


@section scripts{
    <script src="//cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
    <script type="text/javascript">
        angular.module("userApp", [])
            .factory("actionUrl", function() {
                return {
                    loadUserList: "@Url.Action("List")",
                    saveUser: "@Url.Action("Save")",
                    deleteUser: "@Url.Action("Delete")",
                    listOrg:"@Url.Action("ListAll","Org")"
                };
            }).directive("compareTo", function() {
                return {
                    require: "ngModel",
                    link: function(scope, elm, attrs, ctrl) {
                        debugger;
                        elm.add(attrs.compareTo).on("keyup", function(e) {
                            scope.$apply(function() {
                                var isValid = $(attrs.compareTo).val() == ctrl.$viewValue;
                                ctrl.$setValidity("compareTo", isValid);
                            });

                        });

                    }
                };
            })
            .provider("page", function() {
                // 分页
                this.$get = function() {
                    var page = {
                        showPageCount: 5,
                        pageSize: 20,
                        pageIndex: 1,
                        total: 0,
                        totalPageCount: 1,
                        pageRange: [],
                        setTotal: function(total) {
                            page.total = total;
                            page.totalPageCount = (page.total + page.pageSize - 1) / page.pageSize; // 总页数
                            var start = page.pageIndex;
                            ;
                            // 判断当前页码位置 前(页码小于显示页数) 后（页码大于总页数-显示页数）
                            if (page.pageIndex <= page.showPageCount) {
                                start = 1;
                            } else if (page.pageIndex >= page.totalPageCount - page.showPageCount) {
                                start = page.totalPageCount - page.showPageCount;
                            }
                            var ary = [];
                            for (var i = start; i <= page.showPageCount && i <= page.totalPageCount; i++) {
                                ary.push(i);
                            }
                            page.pageRange = ary;
                        }
                    };
                    return page;
                };
            })
            .controller("userController", ["$scope", "$http", "actionUrl", "page", function($scope, $http, actionUrl, page) {

                $scope.userLoading = true;
                $scope.userList = [];
                $scope.page = page;
                // 加载员工列表
                $scope.loadUserList = function() {
                    $http.post(actionUrl.loadUserList, { userName: $scope.searchUserName, pageIndex: $scope.page.pageIndex, pageSize: $scope.page.pageSize })
                        .success(function(r) {
                            if (r.success) {
                                $scope.page.setTotal(r.total);
                                $scope.userList = r.data;

                            }
                            $scope.userLoading = false;
                        })
                        .error(function() {
                            $scope.userLoading = false;
                        });
                };

                $scope.edit = function(id) {

                    $scope.id = id;

                    $scope.userName = "";
                    $scope.password = "";
                    $scope.confPassword = "";
                    $scope.email = "";
                    $scope.orgId = "";
                    if (id > 0) {
                        var userInfo = _.find($scope.userList, function(val) { return val.id == id; });
                        $scope.userName = userInfo.userName;
                        $scope.email = userInfo.email;
                        $scope.orgId = userInfo.orgId.toString();
                    }
                };

                $scope.save = function () {
                    $scope.saving = true;
                    $http.post(actionUrl.saveUser, { id: $scope.id, userName: $scope.userName, email: $scope.email, password: $scope.password, orgId: $scope.orgId }).success(function (r) {
                        if (r.success) {
                            $scope.loadUserList();
                            $(".modal").modal("hide");
                        }
                        $scope.saving = false;
                    }).error(function() {
                        $scope.saving = false;
                    });
                };

                $scope.delete = function(id) {
                    if (confirm("数据删除后无法恢复，确定要删除吗？")) {
                        $http.post(actionUrl.deleteUser, { id: id }).success(function (r) {
                            if (r.success) {
                                $scope.loadUserList();
                            }
                        }).error(function() {

                        });
                    }
                };

                $scope.loadUserList();

                $scope.orgList = [];
                $http.post(actionUrl.listOrg).success(function (r) {
                    if (r.success) {
                        $scope.orgList = r.data;
                        _.each($scope.orgList, function (r) { r.id = r.id.toString(); })
                    }
                })
            }]);
    </script>
}